Skip to main content

Failure Is An Option!

Recover from release failures instantly, without redeploying everything!​

So far, we've had some pretty good luck with our release process (nice going, team!), but we know that that isn't always how releases go. Part of what makes software releases so worrisome is that if/when something goes wrong, it means bad news for our business. Fortunately, with LaunchDarkly, we can release fearlessly, knowing that we have a safety net in case something bad happens.

✨ Enhancing the Webstore​

Version 1 of our new webstore is pretty basic. It offers users a "contact us" form where they can inquire about specific toggles and get in touch with our toggle specialists. However, it's 2023 (at least as of writing this workshop) and we know that any good webstore offers a virtual purchasing option, so let's add one!

Step 1: In your application directory, locate the inventory.tsx file, located in the /src/components directory.

Step 2: We need to create a flag for this release as well. Here are the details for what you'll need:

Flag Name: Updated Billing UI
Flag Key:
Type: Boolean
Description: optional, if you would like to add
Tags: optional, if you would like to add
Client-Side SDK Availability:
Variations: true:, false:

Step 3: Once you've created that flag, Make sure that you add a rule that targets only the Developers segment for this new feature and you set the default rule to false. After you've done that, turn the targeting on. We want to make sure it's working before we open it to our customers!

➕ Add the Code​

Step 1: We need to update our frontend code with this new capability. Replace the existing ReserveButton code in the inventory.tsx file located in the /src/components folder with this code:

{
  billing ? (
    <AddToCartButton
      product={product}
      errorTesting={errorTesting}
      clickHandler={addToCartClickHandler}
    />
  ) : (
    <ReserveButton
      setHandleModal={setHandleModal}
      handleModal={handleModal}
      handleClickTest={handleClickTest}
      updateField={updateField}
      formData={{ name, email }}
      onButtonClick={onButtonClick}
    />
  )
}
{
  billing && (
    <ErrorDialog errorState={errorState} setErrorState={setErrorState} />
  )
}

Step 2: This code is instructing our application to either provide a new AddtoCartButton feature or the existing ReserveButton depending on the flag value. When you've saved everything, go ahead a flip the flag!

😏 Appearances Can Be Deceiving​

When you log back in, you should see an "Add to Cart" button on each of the product cards now when you hover over it. Everything looks great right? Well, go ahead... add something to the cart...

Oh no! 😱

Looks like we have something broken! What do we do?!

Well because we used LaunchDarkly, we don't technically have to do anything. In scenarios like this we have two options:

  1. We immediately turn off the flag and revert back to our previous version for everyone. Easy enough!
  2. We leave the broken code on.

You might be thinking, "why on earth would we do number 2?" Remember, we limited the scope of users who could see this new feature to our developer team. This could be an environment specific issue and testing in production would be really helpful! Since we know customers won't have access to this broken code, we can let the team work on it without impacting our business.

Turns out, the issue seems to coming from a recent API migration we just underwent. Time to see how LaunchDarkly can help us de-risk technical migrations in the next section!